<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 创建页面结构 -->
        <router-link to="/">主页</router-link>
        <router-link to="/product">产品详情</router-link>
        <!-- 页面渲染出口 -->
        <router-view></router-view>
    </div>
</body>
<!-- 导入依赖 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>

<script type="module">
    //a,5定义组件
    const Home = {
        template:`<div>主页</div>`
    }
    /* 
        b.2 
        在当前文件下下面新建一个Product.js 文件 填入以下内容
        export default{
            template:`<div>产品详情</div>`
        }
        //修改Product 组件的引入方式
        const Product = ()=>import("./Product.js")
        懒加载
     */
    const Product = ()=>import("./Product.js")
    /* 
        a.6第一组件和路由的对应关系
         routes名字不能变
    */
   const routes = [
       {
           path:"/",
           component:Home
       },
       {
           path:"/product",
           component:Product
       }
   ]
   //创建根组件,把关联的路径放入根组件执行
   let router = new VueRouter({
        routes,
   })
    //创建一个实例
    let vm = new Vue({
        router,
        el:"#app"
    })
</script>
</html>